<template>
  <div >
    <div class="header">
        <div class="header_logo">
          <img @click="home" :src="info.file" alt="" />
        </div>
        <div class="header_btns">
          <div class="btn_item" :class="index==2?'choose':''" @click="navTo('/agency_purchase' , 2)">
            {{$t('public.Logistics_forwarding')}}
          </div>
          <div class="btn_item" :class="index==1?'choose':''" @click="navTo('/Purchase_on_behalf' , 1)">
            {{$t('public.Purchasing_and_issuing_on_behalf_of_others')}}
          </div>

          <div class="btn_item" :class="index==3?'choose':''" @click="navTo('/Inventory_management' , 3)">
            {{$t('public.Inventory_management')}}
          </div>

          <div class="btn_item" :class="index==5?'choose':''" @click="navTo('/vip' , 5)">
            {{$t('public.MEMBER')}}
          </div>
          <div class="btn_item" :class="index==6?'choose':''" @click="navTo('/call_center' , 6)">
            {{$t('call_center')}}
          </div>

          <div class="btn_item" @click="navTo('/carriage' , 6)" :class="index==4?'choose':''">
            {{$t('carriage')}}
          </div>
        </div>
        <div class="header_lang">
          <lang></lang>
          <span @click="logOut" >{{token?'退出登录':'登录'}}</span>
        </div>
    </div>
    <div style="width: 100%; height: 10vh;">

    </div>
  </div>

</template>

<script>
  import lang from "../../src/lang/change-language.vue"
  import {
      user_system
    } from '@/utils/wqzApi'
export default {
  components:{
    lang
  },
  props: {
    index:''
  },
  data() {
    return{
      token:localStorage.getItem('token')?localStorage.getItem('token'):null,
      choose:localStorage.getItem('chooseHeadrIndex')?localStorage.getItem('chooseHeadrIndex'):null,
      info:{
        file:''
      }
    }
  },
 mounted() {
   this.getInfo()
 },

  methods:{
    getInfo(){
      var info = JSON.parse(localStorage.getItem('webInfo'))
      if(info== null){
        var lang =  localStorage.getItem("lang");
        var data = {
          lang:lang=='zh-CN'?1:2
        }
        user_system(data).then(res=>{
          localStorage.setItem('webInfo' , JSON.stringify(res.data))
          info = res.data
          if(lang=='zh-CN'){
            this.info = info[1]
          }else{
            this.info = info[0]
          }
        })
      }else{
        var lang =  localStorage.getItem("lang");
        if(lang=='zh-CN'){
          this.info = info[1]
        }else{
          this.info = info[0]
        }
      }

    },
    navTo(url , index){
      var token = localStorage.getItem('token')?localStorage.getItem('token'):''
      if(token){
        this.choose = index
        localStorage.setItem('chooseHeadrIndex', index)
        this.$router.push({path:url})
        // setTimeout(()=>{
        //   location.reload()
        // },20)
      }else{
        localStorage.setItem('chooseHeadrIndex', null)
        this.$router.push({path:url})
      }


    },
    home(){
      this.choose = null
      localStorage.setItem('chooseHeadrIndex', null)
      this.$router.push({path:'/'})
    },
    logOut(){
      this.choose = null
      localStorage.setItem('token', '')
      localStorage.setItem('chooseHeadrIndex', null)
      this.$router.push({path:'/login'})
      this.token = localStorage.getItem('token')?localStorage.getItem('token'):null
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .choose{
    font-weight: 800;
    background-color: #f2f2f2;
    border-radius: 15px;
    color: #333;
  }
  .header{
    width: 100%;
    height: 10vh;
    padding:0 2vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
  .row_box{
    width: 100%;
  }
  .header_logo{
    width: 10vw;
    height: 10vh;
    display: flex;
    align-items: center;
    cursor: pointer;
    img{
      width: 5vw;
    }
  }
  .header_btns{
    width: 80vw;
    height: 10vh;
    padding: 10px 10vw;
    box-sizing: border-box;
    display: flex;
    .btn_item{
      cursor: pointer;
      user-select: none;
      width: 10vw;
      // height: 10vh;
      font-size: .9vw;
      display: flex;
      align-items: center;
      font-weight: 700;
      justify-content: center;
      margin-right: 5px;

    }
    .btn_item:hover{
      font-weight: 800;
      background-color: #e6e6e6;
      border-radius: 15px;
      color: #333;
    }

  }
  .header_lang{
    width: 10vw;
    height: 10vh;
    user-select: none;
    display: flex;
    align-items: center;
    font-size: .8vw;
    display: flex;
    justify-content: space-between;
  }

</style>
